<template>
	<template v-if="data?.answerItem">
		<div
			class="grade-box"
			:class="[data?.isRemark ? `gbg${data?.markItem?.result}` : 'gbg3']"
		>
			<div class="grade-left">
				<template
					v-if="
						['11', '12', '13', '14', '15', '20'].includes(
							answerItem?.questionInfoData?.quesStruct
						)
					"
				>
					<div class="grade-item">
						<svg-icon
							v-if="data?.isRemark"
							:name="comStatus(data?.markItem?.result)"
							:size="[24, 24]"
							color="#FFA126"
							style="margin-right: 16px"
						></svg-icon>
						<div class="grade-answer">
							<template v-if="!data?.answerItem?.value?.length">
								<span>未作答</span>
							</template>
							<template
								v-if="
									['11', '12', '13'].includes(data?.answerItem?.quesStruct) &&
									data?.answerItem?.value?.length
								"
							>
								<span
									v-for="(item, index) in data?.answerItem?.value"
									:key="index"
									>{{ comVal(item, data?.answerItem?.quesStruct) }}</span
								>
							</template>
							<template
								v-if="
									['14', '15'].includes(data?.answerItem?.quesStruct) &&
									data?.answerItem?.value?.length
								"
							>
								<div class="upload-box">
									<div
										class="upload-item"
										v-for="(xtem, index) in data?.answerItem?.value"
										:key="xtem"
									>
										<img
											@click="showImg(data?.answerItem?.value, index)"
											:src="xtem"
											alt=""
										/>
									</div>
								</div>
							</template>
						</div>
					</div>
				</template>
				<template
					v-if="['16'].includes(answerItem?.questionInfoData?.quesStruct)"
				>
					<div
						class="grade-item"
						v-for="(item, index) in answerItem?.child"
						:key="index"
					>
						<svg-icon
							v-if="item?.markItem?.result !== null"
							:name="comStatus(item?.markItem?.result)"
							:size="[24, 24]"
							color="#FFA126"
							style="margin-right: 16px"
						></svg-icon>
						<div class="grade-answer">
							<span style="margin-right: 4px">({{ index + 1 }})</span>
							<span>{{ item?.answerItem?.value[0] }}</span>
						</div>
					</div>
				</template>
			</div>
			<div class="grade-right">
				<span
					class="good"
					style="margin-left: 8px"
					v-if="
						data?.markItem?.markTopicId?.length &&
						data?.markItem?.markTopicId[0] == '优秀作答'
					"
					>优秀作答</span
				>
				<span class="cannot" style="margin-left: 8px" v-if="data?.pcannot"
					>不会</span
				>
				<span
					class="cannot"
					style="margin-right: 8px"
					v-if="
						data?.markItem?.markTopicId?.length &&
						data?.markItem?.markTopicId[0] == '典型错误'
					"
					>典型错误</span
				><span
					v-if="data?.isRemark"
					class="grade-status"
					style="margin-left: 8px"
					:class="[data?.markItem ? `sc${data?.markItem?.result}` : 'sc0']"
					>{{ data?.myScore ? data?.myScore : 0 }}<span class="core">分</span>
					<svg-icon
						name="icon-gdot"
						class="gdot"
						:size="[8, 10]"
						:color="comColor(data?.markItem?.result)"
					></svg-icon
				></span>
				<span v-else class="grade-status sc3" style="margin-left: 8px"
					>未批阅
					<svg-icon
						name="icon-gdot"
						class="gdot"
						:size="[8, 10]"
						:color="comColor(5)"
					></svg-icon
				></span>
			</div>
		</div>
	</template>
	<template v-else>
		<div class="grade-box" :class="['gbg3']">
			<div class="grade-left">
				<div class="grade-item">
					<svg-icon
						name="icon-gunfinish"
						:size="[24, 24]"
						color="#FFA126"
						style="margin-right: 16px"
					></svg-icon>
					<div class="grade-answer">
						<span>未提交</span>
					</div>
				</div>
			</div>
		</div>
	</template>
	<a-image-preview-group
		v-model:visible="visible"
		v-model:current="current"
		infinite
		:srcList="preViewImgs"
	></a-image-preview-group>
</template>

<script setup lang="ts">
import { isNumber } from '@/utils/is'

const props = defineProps({
	answerItem: {
		type: Object,
		default: () => {}
	},
	currentIndex: {
		type: Number,
		default: 0
	},
	showImg: {
		type: Boolean,
		default: true
	}
})

const data = computed(() => {
	const info = props.answerItem
	return {
		isRemark: isNumber(info?.markItem?.score),
		myScore: info?.markItem?.score,
		pcannot: info?.answerItem?.cannot,
		markItem: info?.markItem,
		answerItem: info?.answerItem,
		questionInfoData: info?.questionInfoData
	}
})

const visible = ref(false)
const current = ref(0)
const preViewImgs = ref<string[]>([])
const showImg = (arr: string[], index: number) => {
	if (!props.showImg) return
	visible.value = true
	current.value = index
	preViewImgs.value = arr
}
const comStatus = computed(() => {
	return (item: number) => {
		if (item == 0) {
			return 'icon-gfalse'
		} else if (item == 1) {
			return 'icon-gping'
		} else if (item == 2) {
			return 'icon-gtrue'
		} else {
			return 'icon-gfalse'
		}
	}
})
const comVal = computed(() => {
	return (item: string, quesStruct: string) => {
		if (quesStruct == '13') {
			return item === 'false' ? '错' : '对'
		} else {
			return item
		}
	}
})
const comColor = computed(() => {
	return (item: number) => {
		if (item == 0) {
			return '#FF4C26'
		} else if (item == 1) {
			return '#FFA126'
		} else if (item == 2) {
			return '#26A555'
		} else if (item == 3) {
			return '#79828F'
		} else {
			return '#79828F'
		}
	}
})
</script>
<style scoped lang="less">
.grade-answer {
	display: flex;
	align-items: center;
}
.grade-box {
	margin: 8px 0px;
	display: flex;
	justify-content: space-between;
	padding: 16px;
	border-radius: 8px;
	.grade-left {
		display: flex;
		flex-direction: column;
		.grade-item {
			color: #474f59;
			display: flex;
			align-items: center;
			font-family: 'PingFang SC';
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			margin-bottom: 8px;
			&:last-of-type {
				margin-bottom: 0px;
			}
		}
	}
	.grade-right {
		.grade-status {
			position: relative;
			color: #fff;
			font-family: 'PingFang SC';
			font-size: 14px;
			font-weight: 500;
			.core {
				font-size: 12px;
			}
			&.sc0 {
				background: #ff4c26;
			}
			&.sc1 {
				background: #ffa126;
			}
			&.sc2 {
				background: #26a555;
			}
			&.sc3 {
				background: #79828f;
			}
			height: 20px;
			line-height: 20px;
			padding: 0px 8px;
			align-items: center;
			justify-content: center;
			border-radius: 6px 6px 0px 6px;
			.gdot {
				position: absolute;
				right: -6px;
				bottom: 0;
			}
		}
		display: flex;
	}
}
.gbg0 {
	background: rgba(255, 76, 38, 0.06);
}
.gbg1 {
	background: rgba(255, 161, 38, 0.06);
}
.gbg2 {
	background: rgba(38, 165, 85, 0.06);
}
.gbg3 {
	background: #f5f7fa;
}

.good {
	margin-left: 4px;
	padding: 1px 4px;
	color: #26a555;
	font-family: 'PingFang SC';
	font-size: 14px;
	font-weight: 400;
	border-radius: 4px;
	height: 20px;
	display: flex;
	align-items: center;
	background: #e5f4eb;
}
.cannot {
	margin-left: 4px;
	padding: 1px 4px;
	color: #ff4c26;
	font-family: 'PingFang SC';
	font-size: 14px;
	font-weight: 400;
	border-radius: 4px;
	height: 20px;
	display: flex;
	align-items: center;
	background: #ffeae5;
}
.upload-box {
	display: flex;
	flex-wrap: wrap;
	.upload-item {
		margin-top: 8px;
		margin-right: 8px;
		width: 120px;
		height: 120px;
		position: relative;
		img {
			width: 100%;
			height: 100%;
		}
		.idel {
			position: absolute;
			top: -5px;
			right: -5px;
		}
	}
}
</style>
